import React, { useState, useEffect } from 'react';
import { Card, Avatar, Descriptions, Spin, message, Button, Modal, Form, Input, Upload } from 'antd';
import { UserOutlined, EditOutlined, UploadOutlined, MailOutlined, SafetyOutlined, TeamOutlined, IdcardOutlined, TagOutlined, SolutionOutlined } from '@ant-design/icons';
import { useParams, useLocation } from 'react-router-dom';
import { userApi } from '../../../api/services/user/user';
import type { UserDetailInfo } from '../../../api/dto/user';
import styles from './Personal.module.less';

const { TextArea } = Input;

interface PersonalProps {
  userId?: number;
}

const Personal: React.FC<PersonalProps> = ({ userId }) => {
  const params = useParams();
  const [userInfo, setUserInfo] = useState<UserDetailInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [editForm] = Form.useForm();
  const [editing, setEditing] = useState(false);

  // 获取当前路径
  const location = useLocation();
  // 判断是否是个人主页路径
  const isProfilePage = location.pathname === '/user/profile';
  
  // 获取用户ID，优先使用props中的userId，其次使用路由参数
  const targetUserId = userId || Number(params.id);

  useEffect(() => {
    if (targetUserId) {
      // 如果有用户ID，直接获取该用户信息
      fetchUserInfoById(targetUserId);
    } else if (isProfilePage) {
      // 如果是个人主页路径但没有ID，获取当前登录用户信息
      fetchCurrentUserInfo();
    } else {
      // 其他情况，显示错误信息
      setLoading(false);
      message.error('无效的用户ID');
    }
  }, [targetUserId, isProfilePage]);

  // 获取指定ID的用户信息
  const fetchUserInfoById = async (id: number) => {
    try {
      setLoading(true);
      const response = await userApi.getUserInfoById(id);
      
      if (response.code === 0 || response.code === 200) {
        setUserInfo(response.data || null);
      } else {
        message.error(response.message || '获取用户信息失败');
      }
    } catch (error) {
      console.error('获取用户信息出错:', error);
      message.error('获取用户信息失败，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

  const handleEdit = () => {
    if (userInfo) {
      editForm.setFieldsValue({
        name: userInfo.name,
        username: userInfo.username,
        signature: userInfo.signature,
        email: userInfo.email
      });
      setEditModalVisible(true);
    }
  };

  // 获取当前登录用户的信息
  const fetchCurrentUserInfo = async () => {
    try {
      setLoading(true);
      console.log('开始获取当前用户信息');
      
      // 检查token是否存在
      const token = localStorage.getItem('token');
      console.log('当前token:', token);
      
      // 检查userInfo是否存在
      const userInfoStr = localStorage.getItem('userInfo');
      console.log('localStorage中的userInfo:', userInfoStr);
      
      const response = await userApi.getCurrentUser();
      console.log('getCurrentUser响应:', response);
      
      if (response.code === 0 || response.code === 200) {
        console.log('getCurrentUser成功，返回数据:', response.data);
        
        if (response.data && response.data.userInfo) {
          console.log('获取到的用户信息:', response.data.userInfo);
          setUserInfo(response.data.userInfo);
        } else {
          console.error('用户信息为空');
          message.error('获取用户信息失败：用户信息为空');
          
          // 尝试直接使用localStorage中的用户信息
          if (userInfoStr) {
            try {
              const localUserInfo = JSON.parse(userInfoStr);
              console.log('尝试使用localStorage中的用户信息:', localUserInfo);
              setUserInfo(localUserInfo);
            } catch (e) {
              console.error('解析localStorage中的用户信息失败:', e);
            }
          }
        }
      } else {
        console.error('获取当前用户信息失败:', response);
        message.error(response.message || '获取当前用户信息失败');
        
        // 尝试直接使用localStorage中的用户信息
        if (userInfoStr) {
          try {
            const localUserInfo = JSON.parse(userInfoStr);
            console.log('尝试使用localStorage中的用户信息:', localUserInfo);
            setUserInfo(localUserInfo);
          } catch (e) {
            console.error('解析localStorage中的用户信息失败:', e);
          }
        }
      }
    } catch (error) {
      console.error('获取当前用户信息出错:', error);
      message.error('获取当前用户信息失败，请稍后再试');
      
      // 尝试直接使用localStorage中的用户信息
      const userInfoStr = localStorage.getItem('userInfo');
      if (userInfoStr) {
        try {
          const localUserInfo = JSON.parse(userInfoStr);
          console.log('尝试使用localStorage中的用户信息:', localUserInfo);
          setUserInfo(localUserInfo);
        } catch (e) {
          console.error('解析localStorage中的用户信息失败:', e);
        }
      }
    } finally {
      setLoading(false);
    }
  };

  const handleEditSubmit = async (values: any) => {
    try {
      setEditing(true);
      console.log('提交编辑的用户信息:', values);
      
      // 构建更新数据
      const updateData = {
        ...values,
        id: userInfo?.id, // 确保包含用户ID
        profileId: userInfo?.profileId, // 保留学号/工号
        systemRole: userInfo?.systemRole // 保留角色信息
      };
      
      console.log('发送到API的完整数据:', updateData);
      
      // 调用更新用户信息的API
      const response = await userApi.updateUserInfo(updateData);
      console.log('更新用户信息响应:', response);
      
      if (response.code === 0 || response.code === 200) {
        message.success('更新成功');
        setEditModalVisible(false);
        
        // 更新本地存储的用户信息
        const userInfoStr = localStorage.getItem('userInfo');
        if (userInfoStr) {
          try {
            const localUserInfo = JSON.parse(userInfoStr);
            const updatedUserInfo = { ...localUserInfo, ...values };
            localStorage.setItem('userInfo', JSON.stringify(updatedUserInfo));
          } catch (e) {
            console.error('更新本地用户信息失败:', e);
          }
        }
        
        // 重新获取用户信息
        if (targetUserId) {
          fetchUserInfoById(targetUserId);
        } else if (isProfilePage) {
          fetchCurrentUserInfo();
        }
      } else {
        console.error('API返回错误:', response);
        message.error(response.message || '更新失败，请稍后再试');
      }
    } catch (error) {
      console.error('更新用户信息出错:', error);
      message.error('更新失败，请稍后再试');
    } finally {
      setEditing(false);
    }
  };

  const handleAvatarUpload = (info: any) => {
    if (info.file.status === 'done') {
      message.success('头像上传成功');
      // 这里可以调用更新头像的API
      // 然后重新获取用户信息
    } else if (info.file.status === 'error') {
      message.error('头像上传失败');
    }
  };

  if (loading) {
    return (
      <div className={styles['personal-loading']}>
        <Spin size="large" />
        <p>加载中...</p>
      </div>
    );
  }

  if (!userInfo) {
    return (
      <div className={styles['personal-error']}>
        <p>用户信息不存在</p>
      </div>
    );
  }

  return (
    <div className={styles['personal-container']}>
      <Card 
        title={<div className={styles['card-title']}>个人信息</div>}
        className={styles['personal-card']}
        headStyle={{ backgroundColor: '#f0f7ff', borderBottom: '1px solid #d6e8ff', textAlign: 'center' }}
        bodyStyle={{ padding: '24px' }}
      >
        <div className={styles['profile-content']}>
          <div className={styles['profile-header']}>
            <div className={styles['avatar-container']}>
              <Avatar 
                size={150} 
                src={userInfo.avatar} 
                icon={!userInfo.avatar ? <UserOutlined /> : null}
                className={styles['user-avatar']}
              />
              <Upload
                name="avatar"
                showUploadList={false}
                onChange={handleAvatarUpload}
                className={styles['avatar-upload']}
              >
                <Button 
                  icon={<UploadOutlined />} 
                  size="small"
                  className={styles['change-avatar-btn']}
                >
                  更换头像
                </Button>
              </Upload>
            </div>
            
            <div className={styles['user-info']}>
              <h2 className={styles['user-name']}>{userInfo.name || '未设置姓名'}</h2>
              <p className={styles.username}>@{userInfo.username || '未设置用户名'}</p>
              <p className={styles.signature}>{userInfo.signature || '这个人很懒，什么都没有留下~'}</p>
            </div>
          </div>

          <div className={styles['info-section']}>
            <div className={styles['section-title-container']}>
              <h3 className={styles['section-title']}>详细信息</h3>
            </div>
            <Descriptions 
              bordered 
              column={{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}
              className={styles['personal-descriptions']}
              labelStyle={{ backgroundColor: '#f0f7ff', fontWeight: '500' }}
              contentStyle={{ backgroundColor: '#ffffff' }}
            >
              <Descriptions.Item label={<><IdcardOutlined className={styles['info-icon']} /> 用户ID</>}>{userInfo.id}</Descriptions.Item>
              <Descriptions.Item label={<><TeamOutlined className={styles['info-icon']} /> 学号/工号</>}>{userInfo.profileId}</Descriptions.Item>
              <Descriptions.Item label={<><UserOutlined className={styles['info-icon']} /> 姓名</>}>{userInfo.name || '未设置'}</Descriptions.Item>
              <Descriptions.Item label={<><TagOutlined className={styles['info-icon']} /> 用户名</>}>{userInfo.username || '未设置'}</Descriptions.Item>
              <Descriptions.Item label={<><MailOutlined className={styles['info-icon']} /> 邮箱</>}>{userInfo.email || '未设置'}</Descriptions.Item>
              <Descriptions.Item label={<><SafetyOutlined className={styles['info-icon']} /> 角色</>}>{userInfo.systemRole || '未设置'}</Descriptions.Item>
            </Descriptions>
            
            <div className={styles['edit-button-container']}>
              <Button 
                type="primary" 
                icon={<EditOutlined />}
                onClick={handleEdit}
                className={styles['edit-button']}
              >
                编辑资料
              </Button>
            </div>
          </div>
        </div>
      </Card>

      {/* 编辑资料弹窗 */}
      <Modal
        title="编辑个人资料"
        open={editModalVisible}
        onCancel={() => setEditModalVisible(false)}
        footer={null}
        width={500}
      >
        <Form
          form={editForm}
          layout="vertical"
          onFinish={handleEditSubmit}
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>

          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>

          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: '请输入邮箱' },
              { type: 'email', message: '请输入有效的邮箱地址' }
            ]}
          >
            <Input placeholder="请输入邮箱" />
          </Form.Item>

          <Form.Item
            label="个性签名"
            name="signature"
          >
            <TextArea 
              rows={4} 
              placeholder="写点什么来介绍自己吧..."
              maxLength={200}
              showCount
            />
          </Form.Item>

          <Form.Item>
            <div className={styles['edit-form-actions']}>
              <Button onClick={() => setEditModalVisible(false)}>
                取消
              </Button>
              <Button 
                type="primary" 
                htmlType="submit" 
                loading={editing}
              >
                保存
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Personal;